<template>
  <div id="app" class="app">
    <h1>{{ msg }}</h1>
    <school v-if="showSchool"></school>
    <student/>
    <button @click="destroySchool">销毁school组件</button>
    <button @click="sendToSchool">尝试向销毁后的school组件发送消息</button>
  </div>
</template>

<script>
    import Student from './components/Student.vue'
    import School from './components/School.vue'
    import {provide} from 'vue'
    import emitter from './eventBus'

    export default {
        name:'App',
        components:{School, Student}, 
        data(){
          return{
            msg: '你好啊',
            showSchool: true
          }
        },
        setup(){
          //父子组件的通信 方式一：provide/inject
            const helloComp = (msg)=>{
                console.log('hello, this is App.received: '+msg)
            }
            provide('hello', helloComp)
            //组件通信（父子/兄弟）mitt组件库
            const sendToSchool = ()=>{
              emitter.emit('hiBro','App')
          }
          return{
            sendToSchool
          }
        },
        methods:{
          destroySchool(){
            this.showSchool = !this.showSchool
          },
        }
    }
</script>
<style scoped>
  .app{
    background-color: gray;
  }
</style>
